<template>
	<div class="list-item dis-flex" :class="[showtype==1?'':'bottom-b-1 ml-24']">
		<div class="icon-y">
			<slot name="left"></slot>
		</div>
		<div class="flex-1 padding-tb42 ml-24" :class="[showtype==1?'bottom-b-1':'']">
			<div class="dis-flex align-c">
				<div class="item-center flex-1">
					<slot name="center"></slot>
				</div>
				<slot name="right"></slot>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		props: {
			showtype: {
				type: Number,
				default: 1
			}
		}
	}
</script>
<style scoped lang="scss">
	@import '@/css/base.scss';
	.icon-y {
		height: 84px;
		width: 84px;
		box-sizing: content-box;
		border-radius: 100%;
		background-color: #F5F5F5;
	}

	.list-item {
		padding-top: 28px;
		padding-bottom: 28px;
		border-bottom: 1px solid transparent;
		border-image: svg(1px-border param(--color #F8F8F8)) 2 2 stretch;
		border-top: 0;
	}

	.align-c {
		align-items: center;
	}

	.padding-tb42 {
		padding-top: 42px;
		padding-bottom: 42px;
	}

	.bottom-b-1 {
		border-bottom: 1px solid #F5F5F5;
		border-image: none !important;
	}
</style>